<template>
	<!-- 20221227 -->
	<view class="user-config-account-page">
		<!-- 页面内容 -->
		<view class="page-content">

			<!-- 平台授权信息 -->
			<view class="group">
				<!-- #ifndef APP-PLUS -->
				<view class="line">
					<view class="text-30 text-1a">绑定手机号</view>
					<view class="flex align-center">
						<text class="text-28 text-1a">{{userInfo.mobile_phone}}</text>
					</view>
				</view>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->
				<view class="line" @click="go('/pages/user/config/mobileChange')">
					<view class="text-30 text-1a">绑定手机号</view>
					<view class="flex align-center">
						<text class="text-28 text-1a">{{userInfo.mobile_phone}}</text>
						<text class="margin-left-5 tyIcon-arrow-right text-26 text-98"></text>
					</view>
				</view>


				<view class="line" @click="login('weixin')" v-if="auth.includes('weixin')">
					<view class="text-30 text-1a">绑定微信</view>
					<view class="flex align-center">
						<view class="text-28" :class="appWeixinInfo.is_auth ? 'text-1a' : 'text-b3'">
							{{appWeixinInfo.is_auth ? appWeixinInfo.nickname : '未绑定'}}
						</view>
						<text class="margin-left-5 tyIcon-arrow-right text-26 text-98"></text>
					</view>
				</view>

				<view class="line" @click="login('qq')" v-if="auth.includes('qq')">
					<view class="text-30 text-1a">绑定QQ</view>
					<view class="flex align-center">
						<view class="text-28" :class="appQqInfo.is_auth ? 'text-1a' : 'text-b3'">
							{{appQqInfo.is_auth ? appQqInfo.nickname : '未绑定'}}
						</view>
						<text class="margin-left-5 tyIcon-arrow-right text-26 text-98"></text>
					</view>
				</view>

				<view class="line" @click="login('sinaweibo')" v-if="auth.includes('sinaweibo')">
					<view class="text-30 text-1a">绑定微博</view>
					<view class="flex align-center">
						<view class="text-28" :class="appSinaweiboInfo.is_auth ? 'text-1a' : 'text-b3'">
							{{appSinaweiboInfo.is_auth ? appSinaweiboInfo.nickname : '未绑定'}}
						</view>
						<text class="margin-left-5 tyIcon-arrow-right text-26 text-98"></text>
					</view>
				</view>

				<view class="line" @click="login('apple')" v-if="auth.includes('apple') && platform == 'ios'">
					<view class="text-30 text-1a">绑定Apple</view>
					<view class="flex align-center">
						<view class="text-28" :class="appAppleInfo.is_auth ? 'text-1a' : 'text-b3'">
							{{appAppleInfo.is_auth ? appAppleInfo.email : '未绑定'}}
						</view>
						<text class="margin-left-5 tyIcon-arrow-right text-26 text-98"></text>
					</view>
				</view>
				<!-- #endif -->

				<view class="padding-tb-30">
					<view class="flex align-center justify-between" @click="go('/pages/user/config/alipay')">
						<view class="flex flex-direction align-start">
							<view class="line-height-40 text-30 text-1a">绑定支付宝</view>
							<view class="line-height-30 text-24 text-b3">用于支付宝账户提现到账</view>
						</view>

						<view class="flex align-center">
							<view class="text-28" :class="alipayInfo.is_auth ? 'text-1a' : 'text-b3'">
								{{alipayInfo.is_auth ? alipayInfo.account : '未绑定'}}
							</view>
							<text class="margin-left-5 tyIcon-arrow-right text-26 text-98"></text>
						</view>
					</view>
				</view>

			</view>

			<!-- #ifdef APP-PLUS -->
			<!-- 密码 -->
			<view class="group margin-top-20">
				<view class="line" @click="go('/pages/user/register/password')">
					<view class="text-30 text-1a">密码设置</view>
					<view class="flex align-center">
						<view class="text-28 text-1a">{{isSetPassword ? '修改密码' : '设置密码'}}</view>
						<text class="margin-left-5 tyIcon-arrow-right text-26 text-98"></text>
					</view>
				</view>
			</view>

			<!-- 注销账户 -->
			<view class="group margin-top-20" @click="destory">
				<view class="line">
					<view class="width-100p text-center text-30 text-1a">注销账户</view>
				</view>
			</view>
			<!-- #endif -->

		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">

		</view>
	</view>
</template>

<script>
	import user from "../api/user.js"
	export default {
		data() {
			return {
				// 授权
				auth: ['weixin', 'qq', 'sinaweibo', 'apple'],
				// 平台 ios或者android
				platform: '',
				// 用户信息
				userInfo: {},
				// APP绑定微信用户信息
				appWeixinInfo: {},
				// APP绑定QQ用户信息
				appQqInfo: {},
				// APP绑定新浪微博用户信息
				appSinaweiboInfo: {},
				// APP绑定苹果用户信息
				appAppleInfo: {},
				// 绑定支付宝用户信息
				alipayInfo: {},
				// 是否设置过密码 0--没有 1--有
				isSetPassword: false,
				// 是否可以点击，防连点
				canClick: true
			}
		},

		onReady() {
			// 获取平台
			this.platform = this.cn.platform()
		},

		onShow() {
			// 获取用户信息
			this.getAccountInfo()
		},

		methods: {
			/**
			 * 授权登录 微信/QQ/新浪微博/苹果
			 * @param {string} type 类型 weixin--微信 qq--QQ sinaweibo--新浪微博 apple--苹果
			 * @date 2022-08-29
			 */
			login(type) {
				// 信息
				let info = {}
				switch (type) {
					case 'weixin':
						info = this.appWeixinInfo
						break
					case 'qq':
						info = this.appQqInfo
						break
					case 'sinaweibo':
						info = this.appSinaweiboInfo
						break
					case 'apple':
						info = this.appAppleInfo
						break
					default:
						break
				}

				if (this.canClick) {
					this.canClick = false
					if (info.is_auth) {
						// 平台已授权，解绑授权
						this.unbindAuth(type)
					} else {
						// 平台未授权，授权绑定
						this.bindAuth(type)
					}
				}
			},

			/**
			 * 注销账户
			 * @param {string} type 类型 weixin--微信 qq--QQ sinaweibo--新浪微博 apple--苹果
			 * @date 2022-12-27
			 */
			destory() {
				this.cn.confirm("确定注销账户吗,账户注销后所有数据将无法找回").then(res => {
					if (res.confirm) {
						user.deleteUser().then(res => {
							if (res.code == 0) {
								// 清除缓存
								uni.removeStorageSync('user_id');
								uni.removeStorageSync('third_type')
								uni.removeStorageSync('third_type_id')

								// 存入token
								uni.setStorageSync('access_token', res.data.access_token)
								uni.setStorageSync('access_token_expire_time', res.data
									.access_token_expire_time)

								// 返回上一页
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			},

			// ****************************以下为封装方法****************************
			/**
			 * 获取用户信息
			 * @date 2022-08-29
			 */
			getAccountInfo() {
				user.getAccountInfo().then(res => {
					if (res.code == 0) {
						// 用户信息
						this.userInfo = res.data.user_info
						// APP绑定微信用户信息
						this.appWeixinInfo = res.data.app_weixin_info
						// APP绑定QQ用户信息
						this.appQqInfo = res.data.app_qq_info
						// APP绑定新浪微博用户信息
						this.appSinaweiboInfo = res.data.app_sinaweibo_info
						// APP绑定苹果用户信息
						this.appAppleInfo = res.data.app_apple_info
						// 绑定支付宝用户信息
						this.alipayInfo = res.data.alipay_info
						// 是否设置过密码
						this.isSetPassword = res.data.is_set_password == 0 ? false : true
					}
				})
			},

			/**
			 * 授权登录 微信/QQ/新浪微博/苹果
			 * @param {string} type 类型 weixin--微信 qq--QQ sinaweibo--新浪微博 apple--苹果
			 * @date 2022-08-29
			 */
			bindAuth(type) {
				uni.login({
					provider: type,
					success: (loginRes) => {
						this.canClick = true
						uni.getUserInfo({
							provider: type,
							lang: 'zh_CN',
							success: (res) => {
								// console.log(res)
								let url, data
								if (type == 'weixin') {
									data = {
										type: type,
										openid: res.userInfo.openId,
										unionid: res.userInfo.unionId,
										nickname: res.userInfo.nickName,
										headimgurl: res.userInfo.avatarUrl,
										sex: res.userInfo.gender,
										province: res.userInfo.province,
										city: res.userInfo.city,
										country: res.userInfo.country,
										language: 'zh_CN'
									}
								} else if (type == 'qq') {
									data = {
										type: type,
										openid: res.userInfo.openId,
										nickname: res.userInfo.nickname,
										headimgurl: res.userInfo.headimgurl,
										gender: res.userInfo.gender,
										gender_type: res.userInfo.gender_type,
										year: res.userInfo.year,
										province: res.userInfo.province,
										city: res.userInfo.city,
										figureurl_type: res.userInfo.figureurl_type,
										figureurl: res.userInfo.figureurl,
										figureurl_qq: res.userInfo.figureurl_qq,
										is_lost: res.userInfo.is_lost,
										level: res.userInfo.level,
										is_yellow_vip: res.userInfo.is_yellow_vip,
										is_yellow_year_vip: res.userInfo.is_yellow_year_vip,
										yellow_vip_level: res.userInfo.yellow_vip_level,
										vip: res.userInfo.vip,
										constellation: res.userInfo.constellation
									}
								} else if (type == 'sinaweibo') {
									data = {
										type: type,
										openid: res.userInfo.id,
										nickname: res.userInfo.screen_name,
										name: res.userInfo.name,
										headimgurl: res.userInfo.profile_image_url,
										gender: res.userInfo.gender,
										province: res.userInfo.province,
										city: res.userInfo.city,
										location: res.userInfo.location,
										description: res.userInfo.description,
										url: res.userInfo.url,
										profile_url: res.userInfo.profile_url,
										domain: res.userInfo.domain,
										weihao: res.userInfo.weihao,
										followers_count: res.userInfo.followers_count,
										friends_count: res.userInfo.friends_count,
										statuses_count: res.userInfo.statuses_count,
										favourites_count: res.userInfo.favourites_count,
										created_at: res.userInfo.created_at,
										remark: res.userInfo.remark,
										language: res.userInfo.language
									}
								} else if (type == 'apple') {
									data = {
										type: type,
										openid: res.userInfo.openId,
										family_name: res.userInfo.fullName.familyName ?? '',
										give_name: res.userInfo.fullName.giveName ?? '',
										given_name: res.userInfo.fullName.givenName ?? '',
										email: res.userInfo.email ?? '',
										authorization_code: res.userInfo.authorizationCode,
										identity_token: res.userInfo.identityToken,
										real_user_status: res.userInfo.realUserStatus,
										scope: res.userInfo.scope,
									}
								}

								user.updateThirdAuthInfo(data).then(res => {
									if (res.code === 0) {
										// 重新加载当页数据
										this.getAccountInfo()
									}
								})
							},
							fail: (res) => {
								this.cn.toast('获取信息失败')
							}
						})
					},
					fail: (res) => {
						this.canClick = true
						console.log(res)
						this.cn.toast('授权失败，请检查是否已安装对应三方应用')
					}
				})
			},

			/**
			 * 解绑授权
			 * @param {string} type 类型 weixin--微信 qq--QQ sinaweibo--新浪微博 apple--苹果
			 * @date 2022-12-27
			 */
			unbindAuth(type) {
				this.cn.confirm('确定要解绑吗？').then(res => {
					if (res.confirm) {
						// 解绑授权
						user.deleteThirdAuthInfo(type).then(res => {
							this.canClick = true
							if (res.code == 0) {
								// 重新加载当页数据
								this.getAccountInfo()
							}
						})
					} else {
						this.canClick = true
					}
				})
			}
		}
	}
</script>

<style scoped>
	.group {
		padding: 0 30rpx;
		background: #fff;
	}

	.line {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.line_remark {
		padding: 30rpx 0;
	}

	.group .line:last-child {
		border-bottom: none;
	}
</style>
